<template>
    <div class="video-card-Up">
        <router-link  :to="routerURl.videoPlay+videoset.videoId+'-1-1'" class="video-link">
            <div class="video-thumbnail">
                <img :src="videoset.avatarUrl" alt="视频封面">
                <span class="video-duration" v-if="videoset.videoDuration">{{videoset.videoDuration}}</span>
            </div>
            <div class="video-info">
                <div class="video-title">{{videoset.videoTitle}}</div>
                <div class="video-meta">
                    <span>播放: {{videoset.videoPlayCount}}</span>
                    <span>UP主: {{videoset.videoUserName?videoset.videoUserName:'未知'}}</span>
                </div>
            </div>
        </router-link>
    </div>
</template>

<script setup>
import {routerURl} from "@/utils/Request.js";

const props = defineProps({
    videoset:{
        default:{},
    }
})
</script>

<style lang="scss" scoped>
/* 视频卡片样式 */
.video-card-Up {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    .video-link {
        text-decoration: none;
        color: inherit;
    }

    .video-thumbnail {
        position: relative;
        padding-top: 56.25%; /* 16:9 比例 */
        background: #f5f5f5;
    }

    .video-thumbnail img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .video-duration {
        position: absolute;
        bottom: 5px;
        right: 5px;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 2px 5px;
        font-size: 12px;
        border-radius: 3px;
    }

    .video-status {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        font-size: 12px;
        padding: 2px 6px;
        border-radius: 4px;
    }

    .video-playcount {
        position: absolute;
        bottom: 10px;
        left: 10px;
        color: white;
        font-size: 12px;
        display: flex;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 2px 6px;
        border-radius: 4px;
    }

    .video-playcount svg {
        margin-right: 4px;
    }

    .video-info {
        padding: 12px;
    }

    .video-title {
        font-size: 15px;
        margin: 0 0 8px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 42px;
    }

    .video-meta {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #999;
    }

    .video-score {
        color: #ffb800;
        font-weight: bold;
    }

}

.video-card-Up:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
</style>